<template>
  <div>
    <div class="header">
      <a-icon-font class="icon" type="iconqiehuantufenxibeifen2" />
      <span>模型训练</span>
      <div class="divider"></div>
      <div class="tab">
        <span class="m-span">我的模型</span>
        <div class="bottom-line"></div>
      </div>
    </div>
    <div class="data-source">
      <div class="navg-btns">
        <div class="return-btn" @click="backList">
          <a-icon type="left" />返回
        </div>
        <div class="divider2"></div>
        <a-breadcrumb class="bread">
          <span slot="separator">|</span>
          <a-breadcrumb-item
            ><a style="color: #373b52;"
              >数据表 {{ sourceName }}</a
            ></a-breadcrumb-item
          >
        </a-breadcrumb>
      </div>
      <a-divider style="margin: 0;"></a-divider>
      <a-spin :spinning="loading">
        <div class="main-content">
          <strong>{{ sourceName }}</strong>
          <a-row>
            <a-col :span="4"
              ><span style="color: #5d637e;">大小：</span
              >{{ tableData.size }}</a-col
            >
            <a-col :span="4"
              ><span style="color: #5d637e;">行数：</span
              >{{ tableData.count }}</a-col
            >
            <a-col :span="4"
              ><span style="color: #5d637e;">格式：</span
              >{{ tableData.type }}</a-col
            >
            <a-col :span="4"
              ><span style="color: #5d637e;">创建时间：</span
              >{{ tableData.createTime }}</a-col
            >
          </a-row>
          <a-table
            class="source-table four-scroll-y"
            :columns="columns"
            :data-source="souceData"
            bordered
            :pagination="false"
          >
          </a-table>
        </div>
      </a-spin>

      <div class="close" @click="closeGraphPanel">
        <a-icon title="关闭" type="close" />
      </div>
    </div>
    <!-- <div class="ant-modal-mask" style="z-index: 998;"></div> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import DatasetPreviewTable from '@/components/data/DatasetPreviewTable.vue'
import { querySource } from '@/api/model'

@Component({
  components: { DatasetPreviewTable },
})
export default class DataSource extends Vue {
  private projectId: number = 0 // 项目 Id
  public columns: any = []
  public heads: any = []
  public souceData: any = []
  public sourceId: any | null = null
  public sourceName: any | null = null
  public loading: boolean = false
  public tableData: any = {}

  public created() {
    this.sourceId = this.$route.query.id
    this.sourceName = this.$route.query.name
    this.projectId = Number(this.$route.params.id)
    if (this.sourceId) {
      this.querySourceTable()
    }
  }

  public async querySourceTable() {
    this.loading = true
    const response = await querySource({
      data: { datasetId: this.sourceId, projectId: this.projectId },
    })
    this.loading = false
    if (response.data.code === 100) {
      this.tableData = response.data?.result
      this.columns = []
      response.data?.result?.head.forEach((element: any) => {
        this.columns.push({
          title: element.name,
          key: element.name,
          dataIndex: element.name,
          slots: { title: 'customTitle' },
        })
      })
      // console.log('this.columns',this.columns)
      this.heads = response.data?.result?.head // this.getColumns(response.data?.result?.head)
      this.souceData = response.data?.result?.data
    }
  }

  public backList() {
    this.$router.push(this.$route.path.replace(/source/, 'trainning'))
  }

  public closeGraphPanel() {
    this.$router.push({ name: '数据视图' })
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/model';

// .m_title {
//   align-items: center;
//   display: flex;
//   margin-bottom: 22px;

//   b {
//     font-size: 16px;
//   }
// }

// .divider {
//   background-color: #6973ff;
//   height: 18px;
//   margin-right: 8px;
//   width: 4px;
// }

// .divider2 {
//   background-color: rgba(93, 99, 126, 0.45);
//   height: 18px;
//   margin-right: 8px;
//   width: 1px;
// }

// .close {
//   color: #fff;
//   cursor: pointer;
//   font-size: 20px;
//   line-height: 64px;
//   position: fixed;
//   right: 20px;
//   top: -2px;
// }
</style>
